<template>
    <div>
        <ul>
            <li v-for="(item,index) in tdict" :key="index">
                {{item.name}}
            </li>
        </ul>
        <h1>{{num}}</h1>

        <!-- 测试watch的特性 -->
        <button @click="change">修改tdict</button>
        <button @click="shan">点击删除</button>
        <button @click="add">点击添加</button>
    </div>
</template>
<script>
export default {
    props:['dict'],
    data(){
        return {
            i:0,
            num:0,
            tdict:[]
        }
    },
    methods:{
        change(){
            // vue2.6.11 watch不再有重复执行的问题了
            this.tdict[0].name = 2020;
        },
        shan(){
            this.tdict.shift();
        },
        add(){
            this.tdict.push({name:'上海'});
        }
    },
    watch:{
        tdict:{
            deep:true,
            handler(value){
                this.num=value.length;
                console.log(value)
            },
        },
        dict:{
            deep:true,
            handler(data){
                console.log(data);
                //把数组类型转成对象
                this.tdict = data.map(item => {
                    return Object.fromEntries([item]);
                })
            },
            //第一次默认执行
            immediate:true,
        }
    }
}
</script>